<template>
	<view>
		<view class="c-tabs u-p-t-50">
			<view class="item" @click="tabChange(index)" :class="tabIndex === index ? 'active' : ''"
				v-for="(item,index) in category_list">
				{{item.title}}
			</view>
		</view>
		<view class="report-list">
			<view @click="navTo('/pages/report/show',{id:item.id})" hover-class="none" class="item" v-for="(item,index) in list">
				<view class="top">
					<view class="label" v-show="item.level">{{item.level}}</view> {{item.category_title}}
				</view>
				<view class="address u-line-1">
					<u-icon name="map-fill"></u-icon> {{item.address}}
				</view>
				<view class="images">
					<image v-for="(img,i) in item.images_array" @click.native.stop="previewImage(index,i)" mode="aspectFill" :src="img">
					</image>
					<video v-if="item.video.length > 0" @click.native.stop="onVideoTap" :src="item.video"></video>
				</view>
				<view class="content">{{item.content}}</view>
				<view class="bottom">
					<view class="time">{{item.createtime_text}}</view>
				</view>
			</view>
		</view>
		<!-- 空数据 -->
		<view class="u-u-p-t-80 u-m-t-80 u-p-b-80" v-if="!list.length">
			<u-empty src="/static/empty-log.png" text="什么也没有~" icon-size="375" mode="list"></u-empty>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="list.length">
			<u-loadmore :status="has_more ? status : 'nomore'" />
		</view>


		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				category_list:[],
				tabIndex: '',
				list: [],
				page: 1,
				is_update: false,
				has_more: false,
				scrollTop: 0,
				status: 'loadmore',
			}
		},
		onLoad() {
			this.getCategoryList();
			this.getList();
		},
		onShow() {},
		methods: {
			previewImage: function(index, i) {
				uni.previewImage({
					urls: this.list[index].images_array,
					current: i
				});
			},
			getCategoryList:async function(){
				let res = await this.$u.api.getCategoryList();
				this.category_list = res.data;
			},
			getList: async function() {
				let data = {
					page: this.page
				};
				if (this.category_list && this.tabIndex !== '') {
					data.category_id = this.category_list[this.tabIndex]["id"]
				}
				let res = await this.$u.api.getReportOpenList(data);
				this.status = 'nomore';
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				if (this.is_update) {
					this.list = [];
					this.is_update = false;
				}
				let pageList = res.data;
				this.is_show = true;
				this.has_more = pageList.current_page < pageList.last_page;
				this.list = [...this.list, ...pageList.data];
				this.is_empty = !this.list.length;
			},
			tabChange: function(index) {
				if (this.tabIndex !== index) {
					this.tabIndex = index;
				} else {
					this.tabIndex = '';
				}
				this.is_update = true;
				this.page = 1;
				this.getList();
			},
			onVideoTap() {
			  // 阻止事件冒泡
			  return false;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		onPullDownRefresh() {
			this.is_update = true;
			this.page = 1;
			this.getList();
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getList();
			}
		},
		onShareAppMessage() {
			return {
				title: this.vuex_config.name + ' - 曝光台'
			}
		},
		onShareTimeline() {
			return {
				title: this.vuex_config.name + ' - 曝光台'
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f8fa;
	}
	::-webkit-scrollbar {
	  display: none;
	}
	.c-tabs {
		box-sizing: content-box;
		display: flex;
		align-items: center;
		overflow-x: auto;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.c-tabs::after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	.c-tabs .item {
		flex-grow: 1;
		text-align: center;
		padding: 30rpx;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 20rpx;
		background-color: #eeeeee;
		margin-right: 50rpx;
		flex-shrink: 0;
	}

	.c-tabs .item:last-child {
		margin-right: 0;
	}

	.c-tabs .item.active {
		color: #ffffff;
		background-color: #2196F3;
	}

	.report-list {
		padding: 50rpx;
	}
</style>
